<template>
  <div style="text-align: left">
    <el-row style="text-align: right;padding: 10px">
      <el-button icon="el-icon-search" size="mini" @click="searchFlagChange" />
      <el-switch
        v-model="deletedStatus"
        inactive-text="回收站开关"
        style="padding: 10px"
        @change="recycleSwitch"
      />
    </el-row>
    <el-form
      v-if="searchFlag"
      ref="searchForm"
      :inline="true"
      :model="formData"
      :rules="rules"
      size="small"
      label-width="100px"
      label-position="left"
      style="padding: 10px"
    >

      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="formData.username"
          placeholder="请输入用户名"
          clearable
          style="width: 150px"
          @keyup.enter.native="getPageData"
        />
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input
          v-model="formData.nickName"
          placeholder="请输入昵称"
          clearable
          style="width: 150px"
          @keyup.enter.native="getPageData"
        />
      </el-form-item>
      <el-form-item label="电话号" prop="phone">
        <el-input
          v-model="formData.phone"
          placeholder="请输入电话号"
          clearable
          style="width: 150px"
          @keyup.enter.native="getPageData"
        />
      </el-form-item>
      <el-form-item label="是否可用" prop="enabled">
        <el-select
          v-model="formData.enabled"
          placeholder="请选择是否可用"
          clearable
          style="width: 150px"
          @change="getPageData"
        >
          <el-option
            v-for="(item, index) in enabledOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围" prop="enabled">
        <el-date-picker
          v-model="formData.time"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 350px"
        />
      </el-form-item>
      <el-form-item>
        <BeeButton :loading="loading" code="userSearch" type="primary" @click="getPageData">查询</BeeButton>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col v-if="searchFlag" :span="4">
        <el-row style="padding: 10px">
          <el-button type="text" @click="handleAllClick">全部</el-button>
          <el-input
            v-model="filterText"
            placeholder="输入关键字进行过滤"
          />
          <el-tree
            ref="tree"
            :filter-node-method="filterNode"
            default-expand-all
            style="overflow: auto;height: 100%;width: 100%"
            :data="departmentTrees"
            :props="defaultProps"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          />
        </el-row>
      </el-col>
      <el-col :span="searchFlag?20:24">
        <div>
          <el-row style="padding-bottom: 10px">
            <el-col :span="24">
              <BeeButton v-show="!deletedStatus" code="userAdd" type="success" size="mini" @click="addUser">新增
              </BeeButton>
              <BeeButton v-show="!deletedStatus" code="userBatchDelete" type="danger" size="mini" @click="deleteByIds">
                批量删除
              </BeeButton>
            </el-col>
            <el-col :span="24">
              <BeeButton v-show="deletedStatus" code="userClear" type="info" size="mini" @click="clear">
                清空垃圾桶
              </BeeButton>
              <BeeButton v-show="deletedStatus" code="userRestore" type="danger" size="mini" @click="recover">恢复
              </BeeButton>
            </el-col>
          </el-row>
          <div v-if="tableData.length!==0">
            <el-table
              v-loading="loading"
              :size="isMobile()?'mini':'medium'"
              :data="tableData"
              style="width: 100%"
              border
              tooltip-effect="light"
              @selection-change="handleSelectionChange"
              @sort-change="handleSortChange"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-card>
                    <div slot="header" class="clearfix">
                      <span>详细信息</span>
                    </div>
                    <el-form label-position="left" inline class="table-expand">
                      <el-form-item style="width: 100%;text-align: center">
                        <el-image
                          style="width: 100px; height: 100px"
                          :src="props.row.avatar"
                          fit="contain"
                        />
                      </el-form-item>
                      <el-form-item label="用户名">
                        <span>{{ props.row.username }}</span>
                      </el-form-item>
                      <el-form-item label="真实姓名">
                        <span>{{ props.row.realName }}</span>
                      </el-form-item>
                      <el-form-item label="昵称">
                        <span>{{ props.row.nickName }}</span>
                      </el-form-item>
                      <el-form-item label="所属部门">
                        <span>{{ dictTrans(props.row.departmentId,'departmentDict') }}</span>
                      </el-form-item>
                      <el-form-item label="电话号">
                        <span>{{ props.row.phone }}</span>
                      </el-form-item>
                      <el-form-item label="电子邮箱">
                        <span>{{ props.row.email }}</span>
                      </el-form-item>
                      <el-form-item label="性别">
                        <span>{{ genderDict(props.row.gender) }}</span>
                      </el-form-item>
                      <el-form-item label="角色">
                        <span>{{ dictTrans(props.row.roleId,'roleDict') }}</span>
                      </el-form-item>
                      <el-form-item label="创建人">
                        <span>{{ props.row.createUserName }}</span>
                      </el-form-item>
                      <el-form-item label="创建时间">
                        <span>{{ props.row.createTime }}</span>
                      </el-form-item>
                      <el-form-item label="更新人">
                        <span>{{ props.row.updateUserName }}</span>
                      </el-form-item>
                      <el-form-item label="更新时间">
                        <span>{{ props.row.updateTime }}</span>
                      </el-form-item>
                      <el-form-item label="备注" style="width: 100%">
                        <span>{{ props.row.remark }}</span>
                      </el-form-item>
                    </el-form>
                  </el-card>
                </template>
              </el-table-column>
              <el-table-column
                type="selection"
                :selectable="selectable"
                width="55"
              />
              <el-table-column
                prop="username"
                label="用户名"
                show-overflow-tooltip
              />
              <el-table-column
                prop="nickName"
                label="昵称"
                show-overflow-tooltip
              />
              <el-table-column
                prop="departmentId"
                label="部门"
              >
                <template slot-scope="scope">
                  {{ dictTrans(scope.row.departmentId,'departmentDict') }}
                </template>
              </el-table-column>
              <el-table-column
                prop="gender"
                label="性别"
                width="50px"
              >
                <template slot-scope="scope">
                  {{ genderDict(scope.row.gender) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="roleId"
                label="角色"
                width="80px"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ dictTrans(scope.row.roleId,'roleDict') }}
                </template>
              </el-table-column>
              <el-table-column
                prop="phone"
                label="电话"
                width="110px"
              />
              <el-table-column
                prop="createTime"
                label="创建时间"
                sortable
                width="160px"
              />
              <el-table-column
                prop="updateTime"
                label="更新时间"
                sortable
                width="160px"
              />
              <el-table-column
                prop="id"
                label="操作"
                width="150px"
              >
                <template slot-scope="scope">
                  <BeeButton
                    v-show="!scope.row.admin"
                    :disabled="deletedStatus"
                    code="userDelete"
                    size="mini"
                    type="danger"
                    @click="deleteById(scope.row.id)"
                  >删除
                  </BeeButton>
                  <BeeButton
                    v-show="!scope.row.admin"
                    :disabled="deletedStatus"
                    code="userEdit"
                    size="mini"
                    type="warning"
                    @click="editUser(scope.row)"
                  >编辑
                  </BeeButton>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :page-size="size"
              layout="total,sizes, prev, pager, next,jumper"
              :total="total"
              :page-sizes="[ 5, 10, 50, 100]"
              :current-page="current"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <el-empty v-else description="查询结果为空" />
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="dialogTitle"
      top="2%"
      :visible.sync="showDialog"
      :close-on-click-modal="false"
      :width="isMobile()?'100%':'70%'"
      @close="close('关闭')"
    >
      <el-row :gutter="15">
        <el-form
          ref="editOrAddForm"
          :model="addOrEditFormData"
          :rules="rulesEditOrAdd"
          size="medium"
          label-width="100px"
          label-position="left"
        >
          <el-col :span="24">
            <el-form-item label="头像上传" prop="avatar">
              <el-row :gutter="15">
                <el-col :span="10">
                  <el-upload
                    ref="upload"
                    action="/admin/bee-manage/file/upload"
                    :headers="headers"
                    :auto-upload="false"
                    :limit="1"
                    list-type="picture"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :on-remove="handleRemove"
                  >
                    <i class="el-icon-plus" />
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过200kb</div>
                  </el-upload>
                </el-col>
                <el-col :span="4">
                  <el-button size="mini" @click="submitUpload">上传</el-button>
                </el-col>
                <el-col :span="8">
                  <el-image
                    v-show="addOrEditFormData.avatar"
                    style="width: 100px; height: 100px"
                    :src="addOrEditFormData.avatar"
                    fit="contain"
                  />
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="addOrEditFormData.username"
                :disabled="dialogTitle==='编辑用户'"
                placeholder="请输入用户名"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="真实姓名" prop="realName">
              <el-input
                v-model="addOrEditFormData.realName"
                placeholder="请输入真实姓名"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称" prop="nickName">
              <el-input
                v-model="addOrEditFormData.nickName"
                placeholder="请输入昵称"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属部门" prop="departmentId">
              <TreeSelect
                :options="departmentTrees"
                :default-props="defaultProps"
                :value="addOrEditFormData.departmentId"
                @input="getInput"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话号" prop="phone">
              <el-input
                v-model="addOrEditFormData.phone"
                placeholder="请输入电话号"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子邮箱" prop="email">
              <el-input
                v-model="addOrEditFormData.email"
                placeholder="请输入电子邮箱"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否可用" prop="enabled">
              <el-switch v-model="addOrEditFormData.enabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="addOrEditFormData.gender" size="medium">
                <el-radio
                  v-for="(item, index) in genderOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                >{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色" prop="roleId">
              <BeeSelect v-model="addOrEditFormData.roleId" dict-code="roleDict" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="addOrEditFormData.remark"
                type="textarea"
                placeholder="请输入备注"
                :maxlength="255"
                show-word-limit
                :autosize="{minRows: 2, maxRows: 4}"
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close('关闭')">关闭</el-button>
        <el-button :loading="buttonLoading" type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addUser,
  clear,
  deleteById,
  deleteByIds,
  editUser,
  getDepartmentTree,
  page,
  recover
} from '@/api/user'
import BeeButton from '@/components/RoleButton/index.vue'
import { formatData, genderDict, humpToUnderline } from '@/utils/ParamFilter'
import { MessageBox } from 'element-ui'
import TreeSelect from '@/components/TreeSelect/TreeSelect.vue'
import { getToken } from '@/utils/auth'
import { deleteFile } from '@/api/file'
import { deepClone, isMobile } from '@/utils/ObjectUtil'
import BeeSelect from '@/components/BeeSelect/index.vue'
import { dictFilterMixins } from '@/utils/dictFilterMixins'

export default {
  name: 'User',
  components: { BeeSelect, TreeSelect, BeeButton },
  mixins: [dictFilterMixins],
  data() {
    return {
      dialogTitle: '',
      flagChange: 0,
      isChange: false,
      tableData: [],
      departmentTrees: [],
      filterText: '',
      current: 0,
      size: 10,
      total: 0,
      loading: false,
      buttonLoading: false,
      showDialog: false,
      deletedStatus: false,
      searchFlag: !isMobile(),
      uploadFlag: false,
      beforeImg: '',
      imageUrl: '',
      orderColumn: '',
      orderAsc: '',
      multipleSelection: [],
      roles: [],
      headers: {
        Authorization: getToken()
      },
      formData: {
        username: '',
        enabled: '',
        phone: '',
        nickName: '',
        time: '',
        departmentId: ''
      },
      addOrEditFormData: {
        username: undefined,
        realName: undefined,
        nickName: undefined,
        departmentId: undefined,
        gender: false,
        roleId: undefined,
        phone: undefined,
        email: undefined,
        avatar: undefined,
        remark: undefined
      },
      rules: {
        username: [],
        enabled: []
      },
      enabledOptions: [{
        'label': '可用',
        'value': 1
      }, {
        'label': '不可用',
        'value': 0
      }],
      rulesEditOrAdd: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 15, message: '用户名长度在 5 到 15 个字符', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '真实姓名长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        nickName: [{ min: 2, max: 15, message: '真实昵称长度在 2 到 20 个字符', trigger: 'blur' }],
        departmentId: [{
          required: true,
          message: '请选择所属部门',
          trigger: 'change'
        },
        {
          type: 'string', validator: (rule, value, callback) => {
            if (value === '--请选择--') {
              callback(new Error('请选择部门'))
            } else {
              callback()
            }
          }, trigger: 'blur'
        }
        ],
        gender: [{
          required: true,
          message: '性别不能为空',
          trigger: 'change'
        }],
        phone: [
          { required: true, message: '请输入电话号', trigger: 'blur' },
          {
            type: 'number', validator: (rule, value, callback) => {
              const reg = /^1[345789]\d{9}$/
              if (!reg.test(value)) {
                callback(new Error('请输入十一位手机号'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        avatar: [],
        roleId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
        remark: []
      },
      departmentIdOptions: [{
        'label': '选项一',
        'value': '1'
      }, {
        'label': '选项二',
        'value': '2'
      }],
      genderOptions: [{
        'label': '男',
        'value': false
      }, {
        'label': '女',
        'value': true
      }],
      defaultProps: {
        children: 'children',
        label: 'departmentName'
      }
    }
  },
  watch: {
    addOrEditFormData: {
      handler() {
        // 弹窗开启的时候检测的表单由空赋了值，有了一次变动，所以是>1而不是大于0
        this.flagChange++
        if (this.flagChange > 1) {
          this.isChange = true
        }
      },
      deep: true
    },
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getDictFilter('departmentDict')
    this.getDictFilter('roleDict')
    this.getPageData()
    this.getDepartmentTrees()
  },
  methods: {
    isMobile,
    genderDict,
    getDepartmentTrees() {
      getDepartmentTree().then(res => {
        this.departmentTrees = res.data
        console.log(this.departmentTrees)
      }).catch(err => {
        console.log(err)
      }).finally(() => {
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.departmentId.indexOf(value) !== -1
    },
    handleAvatarSuccess(res) {
      if (res.errorCode === 200) {
        this.imageUrl = res.data.imgUrl
        this.addOrEditFormData.avatar = this.imageUrl
      } else {
        this.$message({
          message: '文件上传失败',
          type: 'error'
        })
      }
    },
    beforeAvatarUpload(file) {
      const isValidFormat = ['image/jpeg', 'image/png'].indexOf(file.type) > -1
      const sizeLimit = file.size / 1024 < 200
      if (!isValidFormat) {
        this.$message.error('上传头像图片只能是 JPG或PNG 格式!')
      }
      if (!sizeLimit) {
        this.$message.error('上传头像图片大小不能超过 200kb!')
      }
      return isValidFormat && sizeLimit
    },
    submitUpload() {
      const files = this.$refs.upload.uploadFiles
      if (this.uploadFlag) {
        this.$message({
          message: '已有上传文件，请先移除再上传',
          type: 'error'
        })
        return
      }
      if (files.length > 0) {
        this.$refs.upload.submit()
        this.beforeImg = this.addOrEditFormData.avatar
        this.uploadFlag = true
      } else {
        this.$message({
          message: '请先添加头像照片',
          type: 'error'
        })
      }
    },
    handleRemove() {
      // 关闭的时候如果有上传的文件，则删除
      if (this.uploadFlag === true) {
        deleteFile({
          url: this.addOrEditFormData.avatar
        }).then(() => {
          this.uploadFlag = false
          this.addOrEditFormData.avatar = this.beforeImg
        })
      }
    },
    handleNodeClick(value) {
      this.formData.departmentId = value.id
      this.getPageData()
    },
    handleAllClick() {
      this.formData.departmentId = ''
      this.getPageData()
    },
    getInput(id, value) {
      this.addOrEditFormData.departmentId = id
    },
    recycleSwitch() {
      this.formData.departmentId = ''
      this.getPageData()
    },
    getPageData(type) {
      this.getDictFilter('departmentDict')
      this.getDictFilter('roleDict')
      if (type === 'search') {
        this.current = 1
      }
      this.loading = true
      if (this.formData.time === null) {
        this.formData.time = ''
      }
      const data = {
        current: this.current,
        size: this.size,
        username: this.formData.username,
        nickName: this.formData.nickName,
        phone: this.formData.phone,
        enabled: this.formData.enabled,
        deleted: this.deletedStatus,
        departmentId: this.formData.departmentId,
        orderColumn: this.orderColumn,
        orderAsc: this.orderAsc,
        startTime: this.formData.time !== '' ? this.formData.time[0] : '',
        endTime: this.formData.time !== '' ? this.formData.time[1] : ''
      }
      page(data).then(res => {
        this.tableData = formatData(res.data.records)
        this.total = res.data.total
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.loading = false
      })
    },
    deleteById(id) {
      MessageBox({
        title: '提示',
        message: '确定删除?'
      }).then(() => {
        deleteById(id).then(res => {
          if (res.success) {
            this.getPageData()
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          }
        }).catch(err => {
          console.log(err)
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {
        this.$message({
          message: '取消操作',
          type: 'info'
        })
      })
    },
    deleteByIds() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请先勾选',
          type: 'info'
        })
        return
      }
      MessageBox({
        title: '提示',
        message: '确定删除?'
      }).then(() => {
        deleteByIds(this.multipleSelection).then(res => {
          if (res.success) {
            this.getPageData()
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          }
        }).catch(err => {
          console.log(err)
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {
        this.$message({
          message: '取消操作',
          type: 'info'
        })
      })
    },
    recover() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请先勾选',
          type: 'info'
        })
        return
      }
      MessageBox({
        title: '提示',
        message: '确认恢复?'
      }).then(() => {
        recover(this.multipleSelection).then(res => {
          if (res.success) {
            this.getPageData()
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          }
        }).catch(err => {
          console.log(err)
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {
        this.$message({
          message: '取消操作',
          type: 'info'
        })
      })
    },
    clear() {
      clear().then(res => {
        if (res.success) {
          this.getPageData()
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.loading = false
      })
    },
    editUser(data) {
      this.dialogTitle = '编辑用户'
      this.showDialog = true
      this.addOrEditFormData = deepClone(data)
      // 初始化检测数据
      this.isChange = false
      this.flagChange = 0
    },
    addUser() {
      this.dialogTitle = '新增用户'
      this.showDialog = true
    },
    handelConfirm() {
      this.$refs['editOrAddForm'].validate(valid => {
        if (!valid) return
        this.buttonLoading = true
        if (this.dialogTitle === '编辑用户') {
          if (this.isChange) {
            editUser(this.addOrEditFormData)
              .then(res => {
                if (res.success) {
                  this.getPageData()
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                }
              }).catch(err => {
                console.log(err)
              }).finally(() => {
                this.close('保存')
                this.buttonLoading = false
              })
          } else {
            this.close('关闭')
            this.buttonLoading = false
          }
        } else if (this.dialogTitle === '新增用户') {
          addUser(this.addOrEditFormData)
            .then(res => {
              if (res.success) {
                this.getPageData()
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
              }
            }).catch(err => {
              console.log(err)
            }).finally(() => {
              this.close('保存')
              this.buttonLoading = false
            })
        }
      })
    },
    close(flag) {
      this.showDialog = false
      // 关闭的时候如果有上传的文件，则删除
      if (this.uploadFlag === true && flag !== '保存') {
        deleteFile({
          url: this.addOrEditFormData.avatar
        })
      }
      this.addOrEditFormData = {
        username: undefined,
        realName: undefined,
        nickName: undefined,
        departmentId: undefined,
        roleId: undefined,
        gender: false,
        phone: undefined,
        email: undefined,
        avatar: undefined,
        remark: undefined
      }
      this.imageUrl = ''
      this.uploadFlag = false
      this.$refs.upload.uploadFiles = []
      this.$refs['editOrAddForm'].clearValidate()
    },
    handleSizeChange(size) {
      this.size = size
      this.getPageData()
    },
    handleCurrentChange(current) {
      this.current = current
      this.getPageData()
    },
    selectable(row) {
      return !row.admin
    },
    handleSelectionChange(selectedData) {
      const selectIds = []
      for (let i = 0; i < selectedData.length; i++) {
        selectIds.push(selectedData[i].id)
      }
      this.multipleSelection = selectIds
    },
    handleSortChange(column) {
      this.orderColumn = humpToUnderline(column.prop)
      if (column.order === 'ascending') {
        this.orderAsc = true
      } else if (column.order === 'descending') {
        this.orderAsc = false
      } else {
        this.orderColumn = ''
        this.orderAsc = ''
      }
      this.getPageData('search')
    },
    searchFlagChange() {
      this.searchFlag = !this.searchFlag
    }
  }
}
</script>

<style lang="css" scoped>
.table-expand {
  font-size: 0;
}

.table-expand label {
  width: 90px;
  color: #99a9bf;
}

.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

/deep/ .el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
</style>
